<template>
  <!-- 成绩分布 -->
  <div class="div-background-Scoredistribution">
    <div>
      <img
        src="@/assets/img/other/icon-成绩分布.png"
        class="img-Scoredistribution"
      /><span class="user-Scoredistribution-span">成绩分布</span>
    </div>
    <div class="Scoredistribution-chart" v-if="State.myChartPanelBoolean===true" > 
      <div class="Scoredistribution-chartgrade" id="chartgrade"></div>
    </div>
    <div v-else class="Scoredistribution-chart-No">
      <span>暂无数据</span>
    </div>
  </div>
</template>

<script>
import {
  defineComponent,
  onMounted,
  reactive,
  inject,
  nextTick,
} from "vue";
import bus from "@/bus.js";
export default defineComponent({
  name: "HomeScoredistribution",
  components: {},
  setup() {
    let echarts = inject("echarts");
    let State = reactive({
      myChart: "",
      myChartPanelBoolean:true,
      option: {
        title: {
          text: "",
        },
        title: {
          color: "rgba(85, 218, 19, 1)",
        },
        tooltip: {},
        legend: {
          data: [""],
        },
        xAxis: {
          data: [
            "100分",
            "90-99分",
            "80-89分",
            "70-79分",
            "60-69分",
            "60分",
            "0",
            "未开始",
          ],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: "人数",
            type: "bar",
            data: [0, 0, 0, 0, 0, 0, 0, 0],
            barMaxWidth: 20,
            itemStyle: {
              color: "#7C7FF8",
            },
          },
        ],
      },
    });
    bus.$off('ScoreInfo')
    //不同组件传值;
    bus.$on("ScoreInfo", (data) => {
    if(data==='empty'){
      State.myChartPanelBoolean=false
    }else{
      State.myChartPanelBoolean=true
      //解决出现There is a chart instance already initialized on the dom的问题
      if(State.myChart != null && State.myChart != "" && State.myChart != undefined){
	      State.myChart.dispose();//解决echarts dom已经加载的报错
      }
      nextTick(()=>{
        State.myChart = echarts.init(document.getElementById("chartgrade"));
        State.myChart.setOption(State.option);
        State.myChart.setOption({
          series: [
            {
              data: data,
            },
          ],
        });
      })
    }
    });
    onMounted(() => {
      State.myChart = echarts.init(document.getElementById("chartgrade"));
      State.myChart.setOption(State.option);
    });
    return {
      State,
    };
  },
});
</script>
<style lang="less">
.div-background-Scoredistribution {
  position: absolute;
  left: 980px;
  top: 420px;
  width: 900px;
  height: calc(100% - 630px);
  border-radius: 16px;
  background-color: #ffffff;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -o-user-select: none;
}
.Scoredistribution-chartgrade {
  position: absolute;
  top: 25px;
  width: 910px;
  height: 100%;
}
.Scoredistribution-chart {
  position: absolute;
  width: 100%;
  height: 100%;
}
.img-Scoredistribution {
  position: absolute;
  width: 24px;
  height: 24px;
  left: 19px;
  top: 19px;
}
.user-Scoredistribution-span {
  position: absolute;
  left: 0px;
  top: 18px;
  width: 180px;
  height: 24px;
  font-size: 18px;
  color: #81859c;
  font-family: Source Han Sans CN;
  font-weight: 400;
}
.Scoredistribution-chart-No{
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 400;
  color: #81859c;
}
</style>
